<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<%@ page pageEncoding="UTF-8"%>
<html>
<head>
	<link rel="stylesheet" href="css/cupertino/jquery-ui-1.10.3.custom.min.css" />
	<link rel="stylesheet" href="css/ui.jqgrid.css" />
	<link rel="stylesheet" href="js/plugins/ui.multiselect.css" />
	<link rel="stylesheet" href="js/plugins/searchFilter.css" />
	
	
	<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
	<script type="text/javascript" src="js/grid.locale-cn.js"></script>
	<script type="text/javascript" src="js/jquery.jqGrid.src.js"></script>
    <script type="text/javascript" src="js/plugins/grid.addons.js"></script>
    <script type="text/javascript" src="js/plugins/grid.postext.js"></script>
    <script type="text/javascript" src="js/plugins/grid.setcolumns.js"></script>
    <script type="text/javascript" src="js/plugins/jquery.contextmenu.js"></script>
    <script type="text/javascript" src="js/plugins/jquery.searchFilter.js"></script>
    <script type="text/javascript" src="js/plugins/jquery.tablednd.js"></script>
    <script type="text/javascript" src="js/plugins/ui.multiselect.js"></script>
    <script>
    $(function() {
    jQuery("#editgrid").jqGrid({
    	url:'/ssmWeb/demo/grid-user.action', 
    	datatype: "json",
    	colNames:['Id','birthday', 'sex', 'name'], 
    	colModel:[ 
    	           {name:'id',index:'id', jsonmap:'id',width:55,editable:false,editoptions:{readonly:true,size:10}}, 
    	           {name:'birthday',index:'birthday', jsonmap:'birthday', width:80,editable:true,editoptions:{size:10}}, 
    	           {name:'sex',index:'sex', jsonmap:'sex', width:90,editable:true,editoptions:{size:25}}, 
    	           {name:'name',index:'name', jsonmap:'name', width:100, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"20"}} 
    	         ], 
  	         jsonReader: {  
  	             root:"gridModel",       
  	             records: "record",     
  	             repeatitems : false
  	         } ,  
    	rowNum:10, 
    	rowList:[10,20,30], 
    	pager: '#pagered', 
    	sortname: 'id', 
    	viewrecords: true, 
    	sortorder: "desc", 
    	caption:"Editing Example", 
    	editurl:"someurl.php" 

    }); 
    
    $("#editBtn").click(function(){ 
    	var gr = jQuery("#editgrid").jqGrid('getGridParam','selrow'); 
    	if( gr != null ) 
    		jQuery("#editgrid").jqGrid('editGridRow',gr,{height:280,reloadAfterSubmit:false}); else alert("Please Select Row"); 
    });
    
    $("#addBtn").bind("click", function() {  
        $("#jqGridId").jqGrid('addRow',{  
            rowID : "new_row",  
            initdata : {},  
            position :"first",  
            useDefValues : true,  
            useFormatter : true,  
            addRowParams : {extraparam:{  
                  
            }}  
        });  
        //当前新增id进入可编辑状态  
        $('#jqGridId').jqGrid('editRow','new_row',{  
            keys : true,   
            url: "/ssmWeb/user/insert.action", 
            mtype : "POST",  
            restoreAfterError: true,  
            extraparam: {  
            },  
            oneditfunc: function(rowid){  
                console.log(rowid);  
            },  
            succesfunc: function(response){  
                alert("save success");  
                return true;  
            },  
            errorfunc: function(rowid, res){  
                console.log(rowid);  
                console.log(res);  
            }  
        });  
      
});  
    
    $("#addBtn").click(function(){
    	jQuery("#editgrid").jqGrid('addRow',"new",{
	    		height:280,
	    		reloadAfterSubmit:false,
	    		url:"/ssmWeb/user/insert.action",
	    		mtype : "POST",
	    		restoreAfterError: true,  
	            extraparam: {  
	            	"id": 11,  
	                "sex": $("#sex").val()
	            },  
	            oneditfunc: function(rowid){  
	                alert(rowid);  
	            },  
	            succesfunc: function(response){  
	                alert("save success");  
	                return true;  
	            },  
	            errorfunc: function(rowid, res){  
	            	alert(rowid);  
	            	alert(res);  
	            }  
    		}
    	); 
    });
});
    </script>
   </head> 
 <body>
 <table id="editgrid"></table> 
 <div id="pagered"></div> 
 <input type="button" id="editBtn" value="Edit Selected" />
 <input type="button" id="addBtn" value="Add" />
 </body>   

</html>